<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>李鸿鹄列传</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <style>
      :root {
        --primary-color: #2c3e50;
        --accent-color: #c19a6b;
        --paper-color: #f8f3e6;
      }

      body {
        background: linear-gradient(to right, #f1e8d9, #e6ddce);
        font-family: "Noto Serif SC", serif;
        line-height: 1.8;
        margin: 0;
        padding: 2rem;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
        background: var(--paper-color);
        padding: 3rem 4rem;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        position: relative;
        border-radius: 2px;
      }

      .seal {
        position: absolute;
        right: -30px;
        top: -30px;
        width: 120px;
        opacity: 0.8;
      }

      h1 {
        font-family: "Ma Shan Zheng", cursive;
        text-align: center;
        color: var(--primary-color);
        font-size: 2.8rem;
        margin-bottom: 2rem;
        position: relative;
      }

      h1::after {
        content: "";
        display: block;
        width: 120px;
        height: 3px;
        background: var(--accent-color);
        margin: 1rem auto;
      }

      .chapter {
        margin: 2.5rem 0;
        padding: 1.5rem;
        border-left: 4px solid var(--accent-color);
        background: linear-gradient(
          to right,
          transparent,
          rgba(193, 154, 107, 0.05)
        );
      }

      .highlight {
        color: var(--accent-color);
        font-weight: 700;
      }

      blockquote {
        margin: 2rem 0;
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        font-style: italic;
      }

      .eulogy {
        text-align: right;
        padding: 2rem;
        background: rgba(44, 62, 80, 0.05);
        margin-top: 3rem;
        position: relative;
      }

      @media (max-width: 768px) {
        .container {
          padding: 2rem;
          margin: 1rem;
        }
        h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>李鸿鹄列传</h1>

      <section class="chapter">
        <p>
          李生鸿鹄者，汴梁杞县人也。幼秉异质，三月能言，半岁而行，甫一岁，诵先贤之典，览百家之言。总角之年，已通六艺之文，里巷观者如堵，皆拊掌称奇："<span
            class="highlight"
            >此子当继孔融之慧，必成栋梁之器。</span
          >" 然其性淡泊，虽怀瑾握瑜，未尝炫玉求贾，识者谓之 "<span
            class="highlight"
            >潜龙在渊</span
          >"。
        </p>
      </section>

      <section class="chapter">
        <p>
          及入庠序，才思愈显。其作文采斐然，师长执卷叹曰："<span
            class="highlight"
            >此班马之笔也！</span
          >"
          每有测试，援笔立就，同窗皆掷笔观止。李超与其论道，生谈吐如悬河，语惊四座。时有耆老拄杖而叹："<span
            class="highlight"
            >昔王子安十六登科，今观此子，安知不能越前贤乎？</span
          >"
        </p>
      </section>

      <blockquote>"鸿是江边鸟，您是心上人"</blockquote>

      <section class="chapter">
        <p>
          生姿仪俊朗，玉树临风，且家赀钜万，冠绝乡里。每出行，香车盈道，罗绮遮路。邑中淑女，慕其才貌，或结彩笺以寄情，或谱新词而暗诉。尝有女史题壁云："<span
            class="highlight"
            >鸿影掠江，君心映月</span
          >"，其倾倒若此。然生端方自持，虽处众芳之间，犹若青松独立，未尝有逾矩之行。
        </p>
      </section>

      <div class="eulogy">
        <p>
          赞曰：杞县有士，天纵其才。龙章凤姿，未冠而显。虽负青云之志，不坠少年本心。观其克己守正，<br />谦冲自牧，诚可谓
          "<span class="highlight">翩翩浊世佳公子</span>"也！
        </p>
      </div>
    </div>
  </body>
</html>
